<html>
<head>
    <meta charset="utf-8">
    <title>WebSoket Demo</title>
    <script type="text/JavaScript">
        // tips: WebSocket 调试脚本
        var WebSocket = WebSocket || window.WebSocket || window.MozWebSocket;
        // 验证浏览器是否支持WebSocket协议
        if (!WebSocket) {
            alert("WebSocket not supported by this browser!");
        }
        else {
            var g_ws = null;

            function Display() {
                // 载入上次记录的数据 //...
                console.log("websocket 测试");
            }

            var log = function (s) {
                if (document.readyState !== "complete") {
                    log.buffer.push(s);
                } else {
                    document.getElementById("contentId").value += (s + "\n");
                }
            }

            function CreateConnect () {
                var msg = document.getElementById("wsUrlId");
                console.log("CreateConnect(), url: " + msg.value);
                if (g_ws == null) {
                    var wsUrlValue = msg.value;

                    try {
                        g_ws = new WebSocket(wsUrlValue);
                        // 监听消息
                        g_ws.onmessage = function (event) {
                            //valueLabel.innerHTML+ = event.data;
                            log("onmessage(), 接收到服务器消息: " + event.data);
                        };
                        // 打开 WebSocket
                        g_ws.onclose = function (event) {
                            //WebSocket Status:: Socket Closed
                            log("onclose(), Socket 已关闭!");
                            g_ws = null;
                        };
                        // 打开WebSocket
                        g_ws.onopen = function (event) {
                            //WebSocket Status:: Socket Open
                            // 发送一个初始化消息
//                            g_ws.send("Hello, Server!");
                            log("onopen(), Socket 连接成功!");
                        };
                        g_ws.onerror = function (event) {
                            //WebSocket Status:: Error was reported
                            log("onerror(), Socket 发生错误!");
                        };
                    }
                    catch (e) {
                        g_ws = null;
                        log("连接异常, 重置 websocket");
                    }
                }
            }

            function SendMsg() {
                var msg = document.getElementById("messageId");
                console.log("SendMsg(), msg: " + msg.value);
                if (g_ws != null) {
                    //alert(msg.value);
                    log("发送 Socket 消息: " + msg.value);
                    g_ws.send(msg.value);
                }
                else {
                    log("Socket 还未创建!, msg: " + msg.value);
                }
            }

            function CloseConnect () {
                console.log("CloseConnect()");
                if (g_ws != null) {
                    g_ws.close();
                }
            }
        }
    </script>
</head>

<body onload="Display()">
<div id="valueLabel"></div>
<textarea rows="20" cols="30" id="contentId"></textarea>
<br/>
<input name="wsUrl" id="wsUrlId" value="ws://localhost:8082/springmvc/websocket"/>
<button id="createButton" onClick="javascript:CreateConnect()">Create</button>
<button id="closeButton" onClick="javascript:CloseConnect()">Close</button>
<br/>
<input name="message" id="messageId" value="Hello, Server!"/>
<button id="sendButton" onClick="javascript:SendMsg()">Send</button>
</body>
</html>